<template>
    <div class="getphyscoord">
        <div class="allHead">
            <div class="get-header">
                <div class="backLeft" @click="back('/recommend')">
                    <i class="get-icon">&#xe600;</i>
                </div>
                <div class="get-inputDiv">
                    <i class="get-icon">&#xe643;</i>
                    <input type="text" placeholder="搜索其他城市">
                </div>
                <button class="searchButton">搜索</button>
            </div>
        </div>
        <p style="margin-bottom: 15px;width: 100%;height: 1px;background: #eeeeee"></p>
        <div class="cur-location">
            <p>当前/历史</p>
            <ul class="curHotUl">
                <li>
                    <div id="currentCity">
                        <i class="get-icon">&#xe609;</i>
                        <span>{{currentCity}}</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="hot-city">
            <p>热门城市</p>
            <ul class="curHotUl">
                <li v-for="item in hotList" :key="item.id">
                    <div>{{item.nm}}</div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                currentCity: "",
                cityList: [],
                hotList: [""]
            }
        },
        mounted() {
            // http://39.97.33.178/api/getLocation
            this.axios.get('/api/getLocation').then(res => {
                let msg = res.data.msg;
                if (msg === 'ok') {
                    let data = res.data.data.nm;
                    this.currentCity = data;
                }
            });
            let cityList = window.localStorage.getItem('cityList');
            let hotList = window.localStorage.getItem('hotList');

            if (cityList && hotList) {
                this.cityList = JSON.parse(cityList);
                this.hotList = JSON.parse(hotList);
                this.isLoading = false;
            } else {
                this.axios.get('/api/cityList').then((res) => {
                    let msg = res.data.msg;
                    if (msg === 'ok') {
                        this.isLoading = false;
                        let cities = res.data.data.cities;
                        //[ { index : 'A' , list : [{ nm : '阿城' , id : 123 }] } ]
                        let {cityList, hotList} = this.formatCityList(cities);
                        this.cityList = cityList;
                        this.hotList = hotList;
                        window.localStorage.setItem('cityList', JSON.stringify(cityList));
                        window.localStorage.setItem('hotList', JSON.stringify(hotList));
                    }
                });
            }
        },
        methods: {
            back(path) {
                this.$router.replace(path);//返回上一层
            },
            formatCityList(cities) {
                let cityList = [];
                let hotList = [];

                for (let i = 0; i < cities.length; i++) {
                    if (cities[i].isHot === 1) {
                        hotList.push(cities[i]);
                    }
                }

                for (let i = 0; i < cities.length; i++) {
                    let firstLetter = cities[i].py.substring(0, 1).toUpperCase();
                    if (toCom(firstLetter)) {  //新添加index
                        cityList.push({index: firstLetter, list: [{nm: cities[i].nm, id: cities[i].id}]});
                    } else {   //累加到已有index中
                        for (let j = 0; j < cityList.length; j++) {
                            if (cityList[j].index === firstLetter) {
                                cityList[j].list.push({nm: cities[i].nm, id: cities[i].id});
                            }
                        }
                    }
                }

                cityList.sort((n1, n2) => {
                    if (n1.index > n2.index) {
                        return 1;
                    } else if (n1.index < n2.index) {
                        return -1;
                    } else {
                        return 0;
                    }
                });

                function toCom(firstLetter) {
                    for (let i = 0; i < cityList.length; i++) {
                        if (cityList[i].index === firstLetter) {
                            return false;
                        }
                    }
                    return true;
                }
                return {
                    cityList,
                    hotList
                };

            },
        },

    }
</script>
<style>
    /*.get-icon {
        font-family: iconfont;
        font-style: normal;
        font-size: 24px;
    }

    .allHead {
        width: 100%;
        height: 173px;
        background: #EC9B38;
        position: relative;
    }

    .get-header {
        display: flex;
        width: 670px;
        height: 60px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        justify-content: space-between;
    }

    .get-header > .backLeft {
        width: 68px;
        height: 100%;
    }

    .backLeft > .get-icon {
        color: white;
    }

    .get-header > .get-inputDiv {
        width: 520px;
        display: flex;
    }

    .get-inputDiv > i {
        width: 60px;
        text-align: center;
        line-height: 60px;
        font-size: 30px;
        border-bottom-left-radius: 30px;
        border-top-left-radius: 30px;
        background: #e5e5e5;
    }

    .get-inputDiv > input {
        width: 100%;
        border: none;
        outline: none;
        line-height: 60px;
        border-bottom-right-radius: 30px;
        border-top-right-radius: 30px;
        background: #e5e5e5;
        font-size: 30px;
    }

    .searchButton {
        width: 68px;
        border: none;
        background: none;
        outline: none;
        color: white;
        font-size: 28px;
    }

    !*.....get-header.....*!

    !*.....cur-location.....*!
    .allCity {
        width: 100%;
        height: auto;
        background: hotpink;
        top: 620px;
        position: absolute;
    }

    .allCityCenter {
        width: 680px;
        height: auto;
        display: flex;
        justify-content: space-between;
        background: #e8a41c;
        margin: 0 auto;
    }

    .cityIndex {
        position: fixed;
        right: 3%;
    }

    .cur-location, .hot-city {
        width: 686px;
        margin: 0 auto;
    }

    .cur-location > p, .hot-city > p {
        width: 124px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 28px;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .curHotUl {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .curHotUl > li {
        width: 228px;
        height: 56px;
        text-align: center;
        line-height: 56px;
        font-size: 28px;
        margin: 10px 0;
    }

    #currentCity {
        background: #EC9B38;
        color: white;
    }

    .curHotUl > li > div {
        width: 170px;
        height: 56px;
        margin: 0 auto;
        background: #e5e5e5;
        border-radius: 15px;
    }

    .van-index-bar__sidebar {
        top: 65% !important;
    }

    .van-index-bar__index {
        display: block !important;
        color: rgb(7, 193, 96);
        font-size: 30px !important;
        margin: 10px 0;
    }

    .van-cell__title > span, .van-index-anchor {
        font-size: 30px !important;
    }

    .van-index-anchor {
        margin: 10px 0;
    }

    .city_index {
        width: 20px;
        border-left: 1px #e6e6e6 solid;
    }

    !*.....cur-location.....*!
*/

</style>
